<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <title>Document</title>
    <style>
        html{
            font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial;
        }
        body{
            background-color:#f5f5f5;
        }
        .header{
            height: 60px;
            background-color: #ffffff;
        }
        .header-c{
            width: 1160px;
            height: 60px;
            margin: 0 auto;
        }
        .logo{
            width: 121px;
            height: 60px;
            background: url(ima/bfan-LOGO.png) no-repeat center;
            background-size: 100% auto;
            float: left;
        }
        .nav{
            width: 500px;
            height: 60px;
            float: right;
        }
        .mar{
            display: inline-block;
            width: 64px;
            height: 60px;
            font-family: sans-serif;
            font-weight: 700;
            line-height: 60px;
            font-size: 14px;
            text-align: center;
            margin-left: 40px;
            /* color: #333333; */
            /* margin-top: -2px; */
        }
        .mar10{
            display: inline-block;
            width: 64px;
            height: 60px;
            font-family: sans-serif;
            font-weight: 700;
            line-height: 60px;
            font-size: 14px;
            text-align: center;
        }
        a{
            color: #666666;
        }
        .line{
            width: 64px;
            height: 2px;
            background-color: #865eff;
            visibility: hidden;
            margin-top: -2px;
        }
        .mar:hover .line{
            visibility: visible;
        }
        .mar10:hover .line{
            visibility: visible;
        }
        .line-one{
            width: 64px;
            height: 2px;
            background-color: #865eff;
            visibility: visible;
            margin-top: -2px;
        }
        li:hover a{
            color: #333333;
            /* font-size: 16px; */
            font-weight: 900;
        }
        .web-item{
            width: 64px;
            height: 32px;
            background-color: #1db0e6;
            color: white;
            float: left;
            line-height: 32px;
            margin: 0 auto;
        }
        .banner{
            width: 1160px;
            height: 360px;
            background: url("https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200723120535.jpg") no-repeat center;
            background-size: 100%;
            margin: 0 auto;
            margin-top: 40px;
            border-radius: 10px;
            position: relative;
        }
        .zuo{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: #999999;
            color: #ffffff;
            font-size: 40px;
            text-align: center;
            line-height: 50px;
            position: absolute;
            top: 155px;
            left: 20px;
            opacity: 0;
        }
        .banner .you{
            position: absolute;
            top: 155px;
            left: 1090px;
        }
        .zuo:hover{
            opacity: 1;
        }
        .title{
            width: 1160px;
            height: 30px;
            margin: 0 auto;
            margin-top: 50px;
        }
        .title .one{
            font-size: 22px;
            color: black;
            line-height: 30px;
            letter-spacing: 0.35px;
            font-weight: 900;
        }
        .title .two{
            font-size: 14px;
            color: #969696;
            line-height: 30px;
            margin-left: 12px;
        }
        .title span{
            font-weight: bold;
        }
        .hezi{
            width: 1160px;
            height: 105px;
            margin: 0 auto;
            margin-top: -10px;
        }
        .youshi .beijing{
            width: 275px;
            height: 105px;
            float: left;
            background-color: #fff;
            margin-right: 20px;
            border-radius: 10px;
        }
        .youshi .hezi .one{
            background: url(ima/super_1.png);
            background-size: 100%;
        }
        .youshi .hezi .one1{
            background: url(ima/super_2.png);
            background-size: 100%;
        }
        .youshi .hezi .one2{
            background: url(ima/super_3.png);
            background-size: 100%;
        }
        .youshi .hezi .one3{
            background: url(ima/super_4.png);
            margin-right: 0px;
        }
        .kecheng{
            width: 1160px;
            height: 260px;
            margin: 0 auto;
            margin-top: 20px;
        }
        .ui{
            width: 570px;
            height: 220px;
            background: url(ima/20200118162352.gif) no-repeat center;
            /* background-image: linear-gradient(179deg, #6CB550 0%, #95D844 100%); */
            /* background-color: linear-gradient(179deg, #6CB550 0%, #95D844 100%);; */
            float: left;
            background-color: #95D844;

            background-size: auto 90%;
            border-radius: 10px;
            background-position: right bottom;
        }
        .web{
            width: 570px;
            height: 220px;
            background: url(ima/20200118162355.gif) no-repeat center;
            float: right;
            background-color: #576CD3;
            background-size: auto 90%;
            border-radius: 10px;
            background-position: right bottom;
        }
        .tab{
            width: 230px;
            height: 115px;
            /* background-color: #fff; */
            margin-top: 50px;
            margin-left: 50px;
            position: relative;
        }
        .tab .one{
            font-size: 77px;
            font-weight: bold;
            line-height: 65px;
            color: white;
            position: absolute;
            left: 0;
            top: -10px;
            letter-spacing: -5px;
        }
        .tab .two{
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
            position: absolute;
            left: 90px;
            top: 10px;
        }
        .tab .three{
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
            position: absolute;
            left: 90px;
            top: 35px;
        }
        .tab .chakan{
            width: 155px;
            height: 38px;
            border: 2px solid #ffffff;
            border-radius: 19px;
            color: #fff;
            font-size: 18px;
            font-weight: 800;
            text-align: center;
            line-height: 34px;
            position: absolute;
            top: 80px;
            left: 0;
            cursor: pointer;
        }
        .tab .chakan:hover{
            background: rgba(255, 255, 255, .6);
        }
        .beijing{
            width: 100%;
            height: 600px;
            background-color: #e2e2e2;
            margin-top: 30px;
        }
        .bufanschool{
            width: 1160px;
            height: 600px;
            margin: 0 auto;
            position: relative;
            /* background-color: #fff; */
            /* padding: 95px 0 65px 0; */
        }
        .shangyi{
            width: 230px;
            height: 190px;
            background: url(ima/en-title.png) no-repeat center;
            background-size: 230px 190px;
            position: absolute;
            left: 0;
            top: 95px;
        }
        .shanger{
            width: 275px;
            height: 195px;
            background: url(ima/img-t.jpg) no-repeat center;
            background-size: 275px 195px;
            position: absolute;
            left: 270px;
            top: 95px;
            border-radius: 8px;
        }
        .xiayi{
            width: 230px;
            height: 190px;
            background: url(ima/en-bg.png) no-repeat center;
            background-size: 230px 190px;
            position: absolute;
            bottom: 65px;
            left: -62px;
        }
        .xiaer{
            width: 275px;
            height: 195px;
            background: url(ima/img-b.jpg);
            background-size: 275px 195px;
            position: absolute;
            border-radius: 8px;
            left: 270px;
            bottom: 97px;
        }
        .shangsan{
            left: 570px;
            height: 410px;
            background: url(http://www.bufanui.com/pages/front/img/en_9.jpg) no-repeat center;
            background-size: 100%;
            position: absolute;
            right: 0;
            top: 95px;
            z-index: 1;
            border-radius: 10px;
        }
        .zuo1{
            /* width: 24px; */
            /* height: 34px; */
            font-size: 50px;
            color: #fff;
            position: absolute;
            background-color: rgba(0, 0, 0, .2);
            left: 580px;
            top: 266px;
            z-index: 9;
            cursor: pointer;
        }
        .zuo1:hover{
            background-color: rgba(0, 0, 0, 1);
        }
        .you1{
            /* width: 24px; */
            /* height: 34px; */
            font-size: 50px;
            color: #fff;
            position: absolute;
            background-color: rgba(0, 0, 0, .2);
            left: 1080px;
            top: 266px;
            cursor: pointer;
            z-index: 9;
        }
        .you1:hover{
            background-color: rgba(0, 0, 0, 1);
        }
        .work{
            width: 1160px;
            height: 375px;
            margin: 0 auto;
            /* position: absolute; */
            position: relative;
        }
        .diyi{
            width: 275px;
            height: 300px;
            float: left;
            /* text-align: center; */
            margin-top: 20px;
            margin-right: 20px;
            background-color: #fff;
            border-radius: 8px;
            /* overflow: hidden; */
        }
        .zhaopian{
            /* margin-top: 30px; */
            width: 275px;
            height: 145px;
            background: url(https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200119113448.jpg) no-repeat center;
            background-size: 100%;
            border-radius: 8px 8px 0 0;
        }
        .zhaopian1{
            /* margin-top: 30px; */
            width: 275px;
            height: 145px;
            background: url(https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200119113445.jpg) no-repeat center;
            background-size: 100%;
            border-radius: 8px 8px 0 0;
        }
        .zhaopian2{
            /* margin-top: 30px; */
            width: 275px;
            height: 145px;
            background: url(https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200119113505.jpg) no-repeat center;
            background-size: 100%;
            border-radius: 8px 8px 0 0;
        }
        .zhaopian3{
            /* margin-top: 30px; */
            width: 275px;
            height: 145px;
            background: url(https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200119113513.jpg) no-repeat center;
            background-size: 100%;
            border-radius: 8px 8px 0 0;
        }
        .gongsi{
            line-height: 22px;
            margin-top: 20px;
            font-size: 15px;
            color: #333333;
            font-weight: 800;
            margin-left: 20px;
        }
        .xiangtong{
            font-size: 13px;
            line-height: 18px;
            color: #999999;
            margin-left: 20px;
            margin-top: 6px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        .yuanqiu{
            /* width: 1160px; */
            height: 16px;
            /* margin-top: 60px; */
            position: absolute;
            left: 510px;
            bottom: 10px;
        }
        .yuan{
            width: 8px;
            height: 8px;
            border-radius: 4px;
            float: left;
            background-color: #dadada;
            margin-left: 6px;
        }
        .yuanqiu .hei{
            background-color: #666666;
        }
        .yuanqiu1{
            position: absolute;
            left: 800px;
            bottom: 70px;
        }
        .yuanqiu1 .yuan{
            background-color: rgb(241, 241, 241);
        }
        .yuanqiu1 .hei{
            background-color: #666;
            width: 10px;
            height: 10px;
        }
        .gongkaike{
            width: 1160px;
            height: 154px;
            margin: 0 auto;
            margin-top: 20px;
        }
        .html{
            width: 275px;
            height: 154px;
            float: left;
        }
        .html .tupian{
            width: 275px;
            height: 105px;
            background-image: linear-gradient(90deg, #277be1 0%, #1db0e6 100%);
            border-radius: 8px;
        }
        .ai .tupian{
            width: 275px;
            height: 105px;
            background-image: linear-gradient(90deg, #ff8c00 0%, #ffbb00 100%);
            border-radius: 8px;
        }
        .ae .tupian{
            width: 275px;
            height: 105px;
            background-image: linear-gradient(90deg, #9944c4 0%, #bc63cc 100%);
            border-radius: 8px;
        }
        .sketch .tupian{
            width: 275px;
            height: 105px;
            background-image: linear-gradient(90deg, #120a33 0%, #120a33 100%);
            border-radius: 8px;
        }
        .kechengmingzi{
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            margin-top: 8px;
            font-weight: bold;
            letter-spacing: 0.5px;
        }
        .laoshi{
            font-size: 12px;
            color: #999;
            line-height: 17px;
            margin-top: 6px;
        }
        .gongkaike img{
            width: 50px;
            height: 50px;
            margin-left: 113px;
            margin-top: 30px;
        }
        .ai{
            width: 275px;
            height: 154px;
            float: left;
            margin-left: 20px;
        }
        .ae{
            width: 275px;
            height: 154px;
            margin-left: 20px;
            float: left;
        }
        .sketch{
            width: 275px;
            height: 154px;
            margin-left: 20px;
            float: left;
        }
        .html .beijingtu{
            width: 275px;
            height: 105px;
            background: url(https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200507144241.png) no-repeat center;
            background-size: 275px 105px;
            border-radius: 8px;
        }
        .ai .beijingtu{
            width: 275px;
            height: 105px;
            background: url(https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200119150205.jpg) no-repeat center;
            background-size: 275px 105px;
            border-radius: 8px;
        }
        .ae .beijingtu{
            width: 275px;
            height: 105px;
            background: url(https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200119110601.jpg) no-repeat center;
            background-size: 275px 105px;
            border-radius: 8px;
        }
        .sketch .beijingtu{
            width: 275px;
            height: 105px;
            background: url(https://bufanweb3.oss-cn-beijing.aliyuncs.com/websit/20200110145228.png) no-repeat center;
            background-size: 275px 105px;
            border-radius: 8px;
        }
        .dibu{
            width: 100%;
            height: 275px;
            background-color: #282c35;
            margin-top: 50px;
        }
        .mid{
            width: 1160px;
            height: 275px;
            margin: 0 auto;
            position: relative;
        }
        .dizhi{
            width: 225px;
            height: 98px;
            position: absolute;
            left: 0;
            top: 40px;
            /* background-color: rgb(114, 114, 114); */
        }
        .mid p{
            font-size: 18px;
            line-height: 25px;
            color: rgb(255, 255, 255);
            font-weight: bold;
            letter-spacing: 0.2px;
            
        }
        .mid .biaoti{
            font-size: 14px;
            line-height: 20px;
            color: #999999;
            font-weight: bold;
            letter-spacing: 0.5px;
        }
        .dianhua{
            width: 225px;
            height: 74px;
            position: absolute;
            left: 0px;
            bottom: 48.5px;
            /* background-color: aqua; */
        }
        .weixin{
            width: 155px;
            height: 98px;
            position: absolute;
            left: 300px;
            /* background-color: aqua; */
            top: 40px;
        }
        .qq{
            width: 155px;
            height: 56px;
            position: absolute;
            left: 300px;
            /* background-color: aqua; */
            bottom: 70px;
        }
        .qianduanzixun{
            text-align: center;
            width: 275px;
            height: 198px;
            position: absolute;
            left: 550px;
            /* background-color: aqua; */
            bottom: 38.5px;
        }
        .uizixun{
            text-align: center;
            width: 275px;
            height: 198px;
            position: absolute;
            left: 900px;
            /* background-color: aqua; */
            bottom: 38.5px;
        }
        .mid img{
            width: 150px;
            height: 150px;
            margin-top: 10px;
        }



        .zuidibu{
            width: 100%;
            height: 62px;
            background-color: #20232a;
            text-align: center;
            color:#666;
            line-height: 62px;
            font-size: 12px;
            /* background: url(); */
        }
        .beijing{
            position: relative;
        }
        .hezi .wenzi{
            width: 125px;
            height: 64px;
            position: absolute;
            left: 100px;
            top: 20px;
        }
        .hezi img{
            width: 55px;
            height: 60px;
            position: absolute;
            left: 25px;
            top: 25px;
        }
        .mid .mingzi{
            color: #fff;
            font-size: 16px;
        }
        .mid .wenzi{
            color: #999999;
            font-size: 14px;
        }
        .mid .gongzuoshijian{
            color: #999999; 
            font-size: 12px;" 
        }
        .dianwozixun{
            width: 153px;
            height: 50px;
            background-image: linear-gradient(139deg, #A066FC 0%, #5939EC 100%);
            border-radius: 30px;
            line-height: 50px;
            font-size: 15px;
            color: #ffffff;
            font-weight: bold;
            position: fixed;
            right: -33px;
            bottom: 250px;
            transition: all ease .4s;
            /* letter-spacing: 5px; */
            text-align: center;
        }
        .dianwozixun:hover{
            position: fixed;
            right: 33px;
            bottom: 250px;
        }
        .dianwozixun img{
            width: 22px;
            height: 22px;
            vertical-align: -5px;
            margin-left: -25px;
            margin-right: 4px;
        }
        .banner .zuo img{
            width: 30px;
            height: 30px;
            position: absolute;
            left: 8px;
            top: 10px;
        }
        .banner .zuo{
            position: relative;
        }
        .banner .you{
            position: absolute;
        }
        .banner .you img{
            width: 30px;
            height: 30px;
            position: absolute;
            left: 12px;
            top: 9px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-c">
            <div class="logo"></div>
            <ul class="nav">
                <li class="mar10">
                    <a class="first" href="">首页</a>
                    <div class="line-one"></div>
                </li>
                <li class="mar">
                    <a  href="">前端开发</a>
                    <div class="line"></div>
                </li>
                <li class="mar">
                    <a  href="">UI设计</a>
                    <div class="line"></div>
                </li>
                <li class="mar">
                    <a  href="">不凡说</a>
                    <div class="line"></div>
                </li>
                <li class="mar">
                    <a  href="">导航</a>
                    <div class="line"></div>
            </ul>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="zuo">
            <img src="ima/2.png" alt="">
        </div>
        <div class="zuo you">
            <img src="ima/1.png" alt="">
        </div>
    </div>
    <div class="youshi">
        <div class="title">
            <span class="one">不凡优势</span> <span class="two">SUPER</span>
        </div>
        <div class="hezi">
            <div class="beijing one">
                <div class="tubiao">
                    <img src="ima/icon-1.png" alt="">
                </div>
                <div class="wenzi">
                    <p style="font-size: 19px; line-height: 26px;font-weight: bold; color: white;">精品小班</p>
                    <p style="font-size: 12px; line-height: 17px; color: white; margin-top: 4px;font-weight: 600;">20人精品小班，一对一面授指导</p>
                </div>
            </div>
            <div class="beijing one1">
                <div class="tubiao">
                    <img src="ima/icon-2.png" alt="">
                </div>
                <div class="wenzi">
                    <p style="font-size: 19px; line-height: 26px;font-weight: bold; color: white;">实战项目</p>
                    <p style="font-size: 12px; line-height: 17px; color: white; margin-top: 4px;font-weight: 600;">学员分组完成项目，体验真实工作流程</p>
                </div>
            </div>
            <div class="beijing one2">
                <div class="tubiao">
                    <img src="ima/icon-3.png" alt="">
                </div>
                <div class="wenzi">
                    <p style="font-size: 19px; line-height: 26px;font-weight: bold; color: white;">高薪就业</p>
                    <p style="font-size: 12px; line-height: 17px; color: white; margin-top: 4px;font-weight: 600;">完善的课程体系，助你高薪就业</p>
                </div>
            </div>
            <div class="beijing one3">
                <div class="tubiao">
                    <img src="ima/icon-4.png" alt="">
                </div>
                <div class="wenzi">
                    <p style="font-size: 19px; line-height: 26px;font-weight: bold; color: white;">免费重学</p>
                    <p style="font-size: 12px; line-height: 17px; color: white; margin-top: 4px;font-weight: 600;">不就业免费重学，直到就业为止</p>
                </div>
            </div>
        </div>
        <div style="margin-top: 80px;" class="title">
            <span class="one">课程介绍</span> <span class="two">COURSE</span>
        </div>
        <div class="kecheng">
            <div class="ui">
                <div class="tab">
                    <p class="one">Ui</p>
                    <p class="two">UI设计</p>
                    <p class="three">全科班</p>
                    <div class="chakan">点击查看</div>
                </div>
            </div>
            <div class="web">
                <div class="tab">
                    <p class="one">H5</p>
                    <p style="margin-left: 20px;" class="two">前端开发</p>
                    <p style="margin-left: 20px;" class="three">全科班</p>
                    <div style="margin-left: 20px;" class="chakan">点击查看</div>
                </div>
            </div>
        </div>
    </div>
    <div class="beijing">
        <div class="bufanschool">
            <div class="shangyi"></div>
            <div class="xiayi"></div>
            <div class="shanger"></div>
            <div class="xiaer"></div>
            <div class="shangsan"></div>
            <div class="zuo1">﹤</div>
            <div class="you1">﹥</div>
            <div class="yuanqiu1">
                <div class="yuan hei"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
            </div>
        </div>
    </div>
    <div style="margin-top: 50px;" class="title">
        <span class="one">学院就业</span> <span class="two">WORK</span>
    </div>
    <div class="work">
        <div class="diyi">
            <div class="zhaopian"></div>
            <div class="gongsi">入职公司: 大山外语</div>
            <div class="xiangtong">姓名: 18-06期学院-王萌</div>
            <div class="xiangtong">职位: UI设计师</div>
            <div class="xiangtong">学历: 专科/轨道交通</div>
        </div>
        <div class="diyi">
            <div class="zhaopian1"></div>
            <div class="gongsi">入职公司: 百度 14k</div>
            <div class="xiangtong">姓名: 百度</div>
            <div class="xiangtong">职位: 前端工程师</div>
            <div class="xiangtong">学历: 本科/机械工程</div>
        </div>
        <div class="diyi">
            <div class="zhaopian2"></div>
            <div class="gongsi">入职公司: 去哪儿网 16K</div>
            <div class="xiangtong">姓名: 去哪儿</div>
            <div class="xiangtong">职位: 前端工程师</div>
            <div class="xiangtong">学历: 本科/视觉传达</div>
        </div>
        <div style="margin-right: 0;" class="diyi">
            <div class="zhaopian3"></div>
            <div class="gongsi">入职公司: 新浪微博 15K</div>
            <div class="xiangtong">姓名: 新浪</div>
            <div class="xiangtong">职位: UI设计师</div>
            <div class="xiangtong">学历: 本科/市场营销</div>
        </div>
        <div class="yuanqiu">
            <div class="yuan hei"></div>
            <div class="yuan"></div>
            <div class="yuan"></div>
            <div class="yuan"></div>
            <div class="yuan"></div>
            <div class="yuan"></div>
            <div class="yuan"></div>
            <div class="yuan"></div>
            <div class="yuan"></div>
            <div class="yuan"></div>
        </div>
    </div>
    <div style="margin-top: 10px;" class="title">
        <span class="one">免费公开课</span> <span class="two">SUPER</span>
    </div>
    <div class="gongkaike">
        <div class="html">
            <div class="tupian">
                <img src="ima/h5_logo.png" alt="">
            </div>
            <div class="kechengmingzi">HTML+CSS - 最新教程</div>
            <div class="laoshi">主讲老师：张老师</div>
        </div>
        <div class="ai">
            <div class="tupian">
                <img src="ima/ai_logo.png" alt="">
            </div>
            <div class="kechengmingzi">Ai - 基础教程</div>
            <div class="laoshi">主讲老师：费老师</div>
        </div>
        <div class="ae">
            <div class="tupian">
                <img src="ima/ae_logo.png" alt="">
            </div>
            <div class="kechengmingzi">Ae - 动效基础教程</div>
            <div class="laoshi">主讲老师：马老师</div>
        </div>
        <div class="sketch">
            <div class="tupian">
                <img src="ima/sketch_logo.png" alt="">
            </div>
            <div class="kechengmingzi">Sketch - 基础教程</div>
            <div class="laoshi">主讲老师：李老师</div>
        </div>
    </div>
    <div style="margin-top: 50px;" class="title">
        <span class="one">不凡说</span> <span class="two">TALK</span>
    </div>
    <div class="gongkaike">
        <div class="html">
            <div class="beijingtu">
            </div>
            <div class="kechengmingzi">前端培训/转行，必看指南！</div>
            <div class="laoshi">☸ 2020年03月17日</div>
        </div>
        <div class="ai">
            <div class="beijingtu">
            </div>
            <div class="kechengmingzi">怎么在vue脚手架中解决跨域 </div>
            <div class="laoshi">☸ 2020年01月19日</div>
        </div>
        <div class="ae">
            <div class="beijingtu">
            </div>
            <div class="kechengmingzi">JS 元素拖拽的那些事儿 </div>
            <div class="laoshi">☸ 2020年01月18日</div>
        </div>
        <div class="sketch">
            <div class="beijingtu">
            </div>
            <div class="kechengmingzi">聊聊交互设计的纸面原型</div>
            <div class="laoshi">☸ 2020年01月14日</div>
        </div>
    </div>
    <div class="dibu">
        <div class="mid">
            <div class="dizhi">
                <p class="biaoti">地址:</p>
                <p style="margin-top: 10px;">郑州市 / 郑东新区金水东路绿地新都会 / 6号楼1104 </p>
            </div>
            <div class="dianhua">
                <p class="biaoti">电话:</p>
                <p style="margin-top: 10px;">188-3818-0363</p>
                <p class="gongzuoshijian">(周一至周日 9:00 - 6:30 )</p>
            </div>
            <div class="weixin">
                <p class="biaoti">微信</p>.
                <p style="margin-top: -10px;">bufanxueyuan</p>
            </div>
            <div class="qq">
                <p class="biaoti">QQ</p>
                <p style="margin-top: 16px;">3581997982</p>
            </div>
            <div class="qianduanzixun">
                <p class="wenzi">
                <span class="mingzi">前端</span>
                扫码咨询/报名
                </p>
                <img src="http://www.bufanui.com/pages/front/img/qr_web.png" alt="">
            </div>
            <div class="uizixun">
                <p class="wenzi">
                <span class="mingzi">UI</span>
                 扫码咨询/报名
                </p>
                <img src="http://www.bufanui.com/pages/front/img/qr_ui.jpg" alt="">
            </div>
        </div>
    </div>
    <div class="zuidibu">
        友情链接: 站酷 花瓣 蓝湖 爱果果 github Copyright© 2017-2020 不凡学院 豫ICP备 17015347号 
    </div>
    <div class="dianwozixun">
        <img src="ima/zx.png" alt=""> 点我咨询
    </div>
</body>
</html>